<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安心银行 - 快捷转账</title>
    <style>
        /* 继承主页面样式，仅添加转账页面特有样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "微软雅黑", sans-serif;
            color: #333;
            scroll-behavior: smooth;
        }

        /* 导航栏样式 - 与主页面一致 */
        .nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            transition: background-color 0.3s, box-shadow 0.3s;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .nav.scrolled {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .nav .logo {
            display: flex;
            align-items: center;
        }
        .nav .logo img {
            height: 30px;
            margin-right: 5px;
        }
        .nav .menu a {
            margin: 0 10px;
            text-decoration: none;
            color: #333;
            position: relative;
            transition: color 0.3s;
        }
        .nav .menu a:hover {
            color: #007bff;
        }
        .nav .menu a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #007bff;
            transition: width 0.3s;
        }
        .nav .menu a:hover::after {
            width: 100%;
        }
        .nav .btn-group a {
            margin-left: 10px;
            text-decoration: none;
            padding: 6px 12px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        .nav .btn-logout {
            color: #fff;
            background-color: #dc3545;
            border: 1px solid #dc3545;
        }
        .nav .btn-logout:hover {
            background-color: #bd2130;
            border-color: #bd2130;
        }

        /* 公共样式 */
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-title {
            font-size: 28px;
            margin: 30px 0 20px;
            color: #007bff;
            position: relative;
            padding-bottom: 10px;
        }

        .page-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 3px;
            background-color: #007bff;
        }

        .form-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            padding: 30px;
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: #007bff;
        }

        .form-group .error-message {
            color: #dc3545;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .form-group.error input,
        .form-group.error select {
            border-color: #dc3545;
        }

        .form-group.error .error-message {
            display: block;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-primary {
            background-color: #007bff;
            color: white;
        }

        .btn-primary:hover {
            background-color: #0056b3;
        }

        .btn-secondary {
            background-color: #f8f9fa;
            color: #333;
            border: 1px solid #ddd;
        }

        .btn-secondary:hover {
            background-color: #e9ecef;
        }

        .btn i {
            margin-right: 8px;
        }

        .transfer-tabs {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 2px solid #e9ecef;
        }

        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
            color: #666;
            font-weight: 500;
        }

        .tab.active {
            border-bottom-color: #007bff;
            color: #007bff;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .contact-list {
            list-style: none;
            margin-top: 20px;
        }

        .contact-item {
            padding: 15px;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .contact-item:hover {
            background-color: #f8f9fa;
            border-color: #ddd;
        }

        .contact-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .contact-name {
            font-weight: 500;
        }

        .contact-account {
            font-size: 12px;
            color: #666;
        }

        .contact-bank {
            font-size: 12px;
            color: #007bff;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .form-actions {
                flex-direction: column;
                gap: 10px;
            }

            .form-actions .btn {
                width: 100%;
            }
        }

        /* 提示框样式 - 与主页面一致 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 4px;
            z-index: 300;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .toast.active {
            opacity: 1;
        }
    </style>
    <!-- 引入字体图标 - 与主页面一致 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const nav = document.querySelector('.nav');
                if (window.scrollY > 50) {
                    nav.classList.add('scrolled');
                } else {
                    nav.classList.remove('scrolled');
                }
            });

            // 创建提示框
            const toast = document.createElement('div');
            toast.className = 'toast';
            document.body.appendChild(toast);

            // 显示提示框
            function showToast(message) {
                toast.textContent = message;
                toast.classList.add('active');
                setTimeout(() => {
                    toast.classList.remove('active');
                }, 2000);
            }

            // 退出登录
            const logoutBtn = document.querySelector('.btn-logout');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', () => {
                    if (confirm('确定要退出登录吗？')) {
                        localStorage.removeItem('isLoggedIn');
                        window.location.href = 'login.html'; // 假设登录页面为login.html
                    }
                });
            }

            // 转账标签页切换
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    // 移除所有标签页的激活状态
                    tabs.forEach(t => t.classList.remove('active'));
                    // 隐藏所有标签内容
                    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

                    // 添加当前标签页的激活状态
                    tab.classList.add('active');
                    // 显示当前标签内容
                    const tabContentId = tab.getAttribute('data-tab');
                    document.getElementById(tabContentId).classList.add('active');
                });
            });

            // 最近联系人点击事件
            const contactItems = document.querySelectorAll('.contact-item');
            contactItems.forEach(item => {
                item.addEventListener('click', () => {
                    const name = item.querySelector('.contact-name').textContent;
                    const account = item.querySelector('.contact-account').textContent.split(': ')[1];
                    const bank = item.querySelector('.contact-bank').textContent.split(': ')[1];

                    // 填充表单
                    document.getElementById('transfer-name').value = name;
                    document.getElementById('transfer-account').value = account;
                    document.getElementById('transfer-bank').value = bank;

                    // 显示选中状态
                    contactItems.forEach(i => i.classList.remove('selected'));
                    item.classList.add('selected');
                });
            });

            // 表单验证
            const transferForm = document.getElementById('transfer-form');
            if (transferForm) {
                transferForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    if (validateTransferForm()) {
                        // 表单验证通过，执行转账
                        performTransfer();
                    }
                });
            }

            function validateTransferForm() {
                let isValid = true;

                const name = document.getElementById('transfer-name').value.trim();
                const account = document.getElementById('transfer-account').value.trim();
                const bank = document.getElementById('transfer-bank').value.trim();
                const amount = document.getElementById('transfer-amount').value.trim();
                const password = document.getElementById('transfer-password').value.trim();

                // 验证姓名
                if (name === '') {
                    showError('transfer-name', '请输入收款人姓名');
                    isValid = false;
                } else {
                    hideError('transfer-name');
                }

                // 验证账号
                if (account === '') {
                    showError('transfer-account', '请输入收款账号');
                    isValid = false;
                } else if (account.length < 16) {
                    showError('transfer-account', '收款账号长度不能少于16位');
                    isValid = false;
                } else {
                    hideError('transfer-account');
                }

                // 验证银行
                if (bank === '') {
                    showError('transfer-bank', '请选择收款银行');
                    isValid = false;
                } else {
                    hideError('transfer-bank');
                }

                // 验证金额
                if (amount === '') {
                    showError('transfer-amount', '请输入转账金额');
                    isValid = false;
                } else if (parseFloat(amount) <= 0) {
                    showError('transfer-amount', '转账金额必须大于0');
                    isValid = false;
                } else {
                    hideError('transfer-amount');
                }

                // 验证密码
                if (password === '') {
                    showError('transfer-password', '请输入支付密码');
                    isValid = false;
                } else if (password.length < 6) {
                    showError('transfer-password', '支付密码长度不能少于6位');
                    isValid = false;
                } else {
                    hideError('transfer-password');
                }

                return isValid;
            }

            function showError(inputId, message) {
                const inputElement = document.getElementById(inputId);
                if (inputElement) {
                    const formGroup = inputElement.closest('.form-group');
                    const errorMessage = formGroup.querySelector('.error-message');
                    if (formGroup && errorMessage) {
                        formGroup.classList.add('error');
                        errorMessage.textContent = message;
                    }
                }
            }

            function hideError(inputId) {
                const inputElement = document.getElementById(inputId);
                if (inputElement) {
                    const formGroup = inputElement.closest('.form-group');
                    if (formGroup) {
                        formGroup.classList.remove('error');
                    }
                }
            }

            function performTransfer() {
                const name = document.getElementById('transfer-name').value;
                const amount = document.getElementById('transfer-amount').value;

                // 显示加载提示
                showToast(`正在向${name}转账¥${amount}...`);

                // 模拟转账过程
                setTimeout(() => {
                    // 这里应该有实际的转账API调用
                    showToast('转账成功！');

                    // 重置表单
                    transferForm.reset();
                    contactItems.forEach(i => i.classList.remove('selected'));

                    // 3秒后返回个人中心
                    setTimeout(() => {
                        window.location.href = 'personal-center.html'; // 假设个人中心页面为personal-center.html
                    }, 3000);
                }, 1500);
            }

            // 模拟从数据库获取最近联系人 (实际应用中应通过API获取)
            function fetchRecentContacts() {
                // 模拟异步获取联系人
                setTimeout(() => {
                    const contacts = [
                        {
                            name: '李四',
                            account: '6222021234567890123',
                            bank: '中国工商银行'
                        },
                        {
                            name: '王五',
                            account: '6228480123456789012',
                            bank: '中国农业银行'
                        },
                        {
                            name: '赵六',
                            account: '6217000012345678901',
                            bank: '中国银行'
                        },
                        {
                            name: '钱七',
                            account: '6230520123456789012',
                            bank: '中国建设银行'
                        }
                    ];

                    const contactList = document.querySelector('.contact-list');
                    contacts.forEach(contact => {
                        const item = document.createElement('li');
                        item.className = 'contact-item';

                        item.innerHTML = `
                            <div class="contact-info">
                                <div>
                                    <div class="contact-name">${contact.name}</div>
                                    <div class="contact-account">账号: ${contact.account}</div>
                                    <div class="contact-bank">银行: ${contact.bank}</div>
                                </div>
                                <i class="fa fa-check-circle" style="color: #007bff; display: none;"></i>
                            </div>
                        `;

                        contactList.appendChild(item);
                    });

                }, 500); // 模拟网络延迟
            }

            // 页面加载时获取最近联系人
            fetchRecentContacts();
        });
    </script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="logo">
            <i class="fa fa-university" style="font-size:24px;color:#007bff;"></i>
            <span>安心银行</span>
        </div>
        <div class="menu">
            <a href="personal-center.html">个人中心</a>
            <a href="#" class="active">快捷转账</a>
            <a href="#">账户查询</a>
            <a href="#">交易记录</a>
        </div>
        <div class="btn-group">
            <span class="username" style="margin-right: 10px;">欢迎，用户</span>
            <a href="#" class="btn-logout">退出</a>
        </div>
    </div>

    <div class="container">
        <h1 class="page-title">快捷转账</h1>

        <div class="form-container">
            <div class="transfer-tabs">
                <div class="tab active" data-tab="tab-internal">行内转账</div>
                <div class="tab" data-tab="tab-external">跨行转账</div>
                <div class="tab" data-tab="tab-mobile">手机号转账</div>
            </div>

            <div id="tab-internal" class="tab-content active">
                <form id="transfer-form">
                    <div class="form-group">
                        <label for="transfer-name">收款人姓名</label>
                        <input type="text" id="transfer-name" placeholder="请输入收款人姓名">
                        <div class="error-message"></div>
                    </div>

                    <div class="form-group">
                        <label for="transfer-account">收款账号</label>
                        <input type="text" id="transfer-account" placeholder="请输入16-19位收款账号">
                        <div class="error-message"></div>
                    </div>

                    <div class="form-group">
                        <label for="transfer-bank">收款银行</label>
                        <select id="transfer-bank">
                            <option value="">请选择收款银行</option>
                            <option value="icbc">中国工商银行</option>
                            <option value="abc">中国农业银行</option>
                            <option value="boc">中国银行</option>
                            <option value="ccb">中国建设银行</option>
                            <option value="cmb">招商银行</option>
                            <option value="cbc">交通银行</option>
                        </select>
                        <div class="error-message"></div>
                    </div>

                    <div class="form-group">
                        <label for="transfer-amount">转账金额 (¥)</label>
                        <input type="number" id="transfer-amount" placeholder="请输入转账金额" step="0.01">
                        <div class="error-message"></div>
                    </div>

                    <div class="form-group">
                        <label for="transfer-password">支付密码</label>
                        <input type="password" id="transfer-password" placeholder="请输入6位支付密码">
                        <div class="error-message"></div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="btn btn-secondary">
                            <i class="fa fa-undo"></i> 重置
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-exchange"></i> 确认转账
                        </button>
                    </div>
                </form>
            </div>

            <div id="tab-external" class="tab-content">
                <p>跨行转账功能正在开发中，敬请期待！</p>
            </div>

            <div id="tab-mobile" class="tab-content">
                <p>手机号转账功能正在开发中，敬请期待！</p>
            </div>
        </div>

        <div class="form-container">
            <h2 style="font-size: 20px; margin-bottom: 15px; color: #555;">最近转账联系人</h2>
            <ul class="contact-list">
                <!-- 联系人将通过JavaScript动态加载 -->
                <li class="contact-item">
                    <div class="contact-info">
                        <div>
                            <div class="contact-name">加载中...</div>
                            <div class="contact-account">账号: 加载中...</div>
                            <div class="contact-bank">银行: 加载中...</div>
                        </div>
                        <i class="fa fa-check-circle" style="color: #007bff; display: none;"></i>
                    </div>
                </li>
                <li class="contact-item">
                    <div class="contact-info">
                        <div>
                            <div class="contact-name">加载中...</div>
                            <div class="contact-account">账号: 加载中...</div>
                            <div class="contact-bank">银行: 加载中...</div>
                        </div>
                        <i class="fa fa-check-circle" style="color: #007bff; display: none;"></i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>